<template>
    <view class="content">
        <van-popup  position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content" :style="'height:' + (popupHeight) + 'px'">
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80" show-scrollbar="false"> -->

                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>

                    <view class="cancelPopup-wrapper " >
                        <view class="popupTips">取消后无法恢复，优惠券、积分可退回</view>
                        <view class="popupSubtitle">请选择取消原因</view>
                        <view class="sort">
                            <radio-group @change="radioChange">
                                <label class="popup_item itemLeft" v-for="(item,index) in popupData" :key="index" :id="item.key">
                                    <radio color="#FF6203" :value="item.key" :checked="item.isChecked" class="radio" /> 
                                    <view style="margin-left:6px;">{{item.text}}</view>
                                </label>
                            </radio-group>
                            <!-- <van-radio-group :value="reasonId" @change="radioChangeReason">
                                <view class="listItem popup_item" v-for="(item, index) in popupData" :key="index" :id="item.key">
                                        <van-radio color="#FF6203" :name="item.key" ></van-radio>
                                        <view style="margin-left:6px;">{{item.text}}</view>
                                </view>
                            </van-radio-group> -->
                        </view>
        
                    </view>

                    <van-toast id="van-toast" />
                </view>
                <!-- </scroll-view> -->
                <view class="goodsAction bottom">
                    <van-goods-action>
                        <van-goods-action-button  plain color="#111111" text="暂不取消" @click="notCancel" />
                        <van-goods-action-button color="#FF6203" type="warning" text="确定取消" @click="onCancelOrder" />
                    </van-goods-action>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import {cancelOrderApi} from '@/api/order'

export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        orderId: {
            type: String,
            default: () => ''
        },
        orderType: {
            type: Number,
            default: () => 0
        }
        // popupBiaoshi:{
        //     type: Number,
        //     default: () => 0
        // }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            title: '取消订单',
            option: {},
            url: '',
            stepperValue:1,
            popupData:[

                {
                    key:1,
                    text:'价格有点贵'
                },
                {   
                    key:2,
                    text:'规格/款式/数量拍错'
                },
                {
                    key:3,
                    text:'收货地址拍错'
                },
                {
                    key:4,
                    text:'暂时不需要了'
                },
                {
                    key:5,
                    text:'其他'
                },
            ],
            reasonId: '', // 选中的id
            popupHeight:'500',
            cancelType:6,
            isCancel:true,
            cancelOrderReasonMap:{
                PRICE_EXPENSIVE: { code: 1, text: '价格有点贵' },
                WRONG_SPECIFICATION: { code: 2, text: '规格/款式/数量拍错' },
                WRONG_ADDRESS: { code: 3, text: '收货地址拍错' },
                NO_LONGER_NEEDED: { code: 4, text: '暂时不需要了' },
                OTHER: { code: 5, text: '其他' },
                PAY_TIME_OUT: { code: 6, text: '支付超时' }
            }
        }
    },

    computed: {
    },


    watch: {
        orderType:{
            immediate:true, // 立即执行
            handler(val){
                console.log(val,'orderType')
                if(val==1){
                    this.popupData = [
                        { key: 1, text: '价格有点贵' },
                        { key: 2, text: '规格/款式/数量拍错' },
                        // { key: 3, text: '收货地址拍错' },
                        { key: 4, text: '暂时不需要了' },
                        { key: 5, text: '其他' },
                    ]
                }else{
                    this.popupData = [
                        { key: 1, text: '价格有点贵' },
                        { key: 2, text: '规格/款式/数量拍错' },
                        { key: 3, text: '收货地址拍错' },
                        { key: 4, text: '暂时不需要了' },
                        { key: 5, text: '其他' },
                    ]
                }
            }
        }
    },
    onLoad () {

    },
    onReady () {
        this.popupData.forEach(ele => {
            this.$set(ele,'isChecked',false)
        });
    },

    methods: {
        // 选口味
        // onClickSort(val,e,item){
        //     console.log(val,e,item,'商品排序')
        //     this.curS=val
        //     this.curSName=item.text
        // },
         // 单选框
         radioChange(e){
            console.log('radio发生change事件，携带value值为：', e.detail.value)
            this.popupData.forEach((item,index)=>{
                console.log(e.detail.value,Number(item.key),index,'index',Number(item.key)=== Number(e.detail.value))
                if (Number(item.key) === Number(e.detail.value)) {
                    item.isChecked = true
                    this.cancelType = Number(e.detail.value)
                } else {
                    item.isChecked = false
                }
            })
        },
        radioChangeReason(e){
            console.log('radio发生change事件，携带value值为：', e.detail)
            // this.cancelType = Number(e.detail.value)
        },
       
        // 关闭弹窗
        closePopup () {
            this.isCancel=false
            this.$emit('closeCancelPopup',this.isCancel)
        },

        // 暂不取消
        notCancel(){
            this.isCancel=false
            this.$emit('closeCancelPopup',this.isCancel,'cancel')
        },


        // 确定取消
        onCancelOrder(){
            // Toast('取消成功')
            
            console.log(this.orderId,'订单id',this.cancelType,'取消原因')
            cancelOrderApi(this.orderId,this.cancelType).then(res=>{
                console.log(res,'取消订单')
                if(res.code==200){
                    Toast({
                        message: '取消成功',
                        duration: 3000
                    })
                    this.isCancel=true
                    this.$emit('closeCancelPopup',this.isCancel,'submit')
                }else{
                    Toast('取消失败')
                    this.isCancel=false
                    this.$emit('closeCancelPopup',this.isCancel,'cancel')
                }
            })
        },


    // 最小价格
    clickMinVal(){},
    // 最大值
    clickMaxVal(){}

  },

}
</script>
<style lang="scss" scoped>


::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding: 24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height: 50%;


    .popup-main {
        height: 100%;
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .cancelPopup-wrapper {
        padding-top: 23px;
    }

    .popupTips{
        font-size: 12px;
        text-align: left;
        color: #666666;
        background-color: #F0F0F0;
        padding-top: 10px ;
        padding-bottom: 10px;
        padding-left: 15px;
    }
    // 副标题
    .popupSubtitle{
        font-size: 14px;
        text-align: left;
        color: #666666;
        line-height: 14px;
        margin-top: 15px;
        margin-bottom: 30px;
    }

    // 商品排序
    .sort {
        .popup_item {
            // font-weight: bold;
            font-size: 14px;
            text-align: left;
            color: #111111;
            line-height: 14px;
            margin-bottom: 20px;

            &.active {
                font-weight: bolder;
                color: #FF6203;
            }
        }

        .popup_item:last-child {
            margin-bottom: 0px;
        }
    }
    .itemLeft{
        display: flex;
        align-items: center;
    }

    // 价格区间
    .price_range {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    // 加入购物车按钮
    .goodsAction {
        margin-top: 22px;
        width: calc(100% - 48px);
        text-align: center;
        // background-color: aquamarine;
        height: 70px;
    }

    .button {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        height: 44px;
        line-height: 44px;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}

::v-deep .van-cell {
    border: 1px solid #888888 !important;
}

::v-deep .van-cell--hover .hover-class{
    border: 1px solid #888888;
}


::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
}



.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

